<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div ng-controller="Ctrl">
		<greeting greet="sayHello(name)"></greeting>
		<greeting greet="sayHello(name)"></greeting>
		<greeting greet="sayHello(name)"></greeting>
	</div>

	<script src="angular.js"></script>
	<script type="text/javascript">
		var module = angular.module("app", []);

		module.controller("Ctrl", function($scope) {
			$scope.sayHello = function(name) {
				alert("HELLO" + name);
			}
		});

		module.directive("greeting", function() {
			return {
				restrict: "E",
				template: `
					<input type="text" ng-model="userName">
					<br>
					<button ng-click="greet({name:userName})">1</button> 
				`,
				scope: {
					greet: "&"
				}
			}
		});


	</script>
</body>
</html>